<template>
<div>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="5" class="edit-label">
      边框
    </a-col>
    <a-col :span="9">
      <a-input-number :min="0" :step="1" size="small" style="width: 100%" />
      <div class="input-tip">粗细</div>
    </a-col>
    <a-col :span="9" :offset="1">
      <a-select size="small" style="width: 100%" >
        <a-select-option v-for="item in borderStyleList" :value="item.value" :key="item.value">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <div class="input-tip">类型</div>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="9" :offset="5">
      <a-input  size="small">
        <div slot="addonAfter" style="width: 16px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span style="font-size: 12px">拾色器</span>
            </template>
            <input
              size="small"
              type="color"
              style="width: 15px;height: 20px;outline: none;border: none"/>
          </a-tooltip>
        </div>
      </a-input>
      <div class="input-tip">边框色</div>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="5" class="edit-label">图片</a-col>
    <a-col :span="19">
      <a-input-search placeholder="图片地址" size="small">
        <a-button slot="enterButton" icon="upload" type="primary">
          上传
        </a-button>
      </a-input-search>
    </a-col>
  </a-row>
  <a-row :gutter="10" class="edit-group">
    <a-col :span="4">
      <a-tooltip placement="bottom">
        <template slot="title">
          <span style="font-size: 12px">水平垂直居中</span>
        </template>
        <a-button class="choose-style" @click="editLayer.center();canvas.renderAll()" >
          <a-icon type="pic-center" />
        </a-button>
      </a-tooltip>
    </a-col>
    <a-col :span="4" :offset="1">
      <a-tooltip placement="bottom">
        <template slot="title">
          <span style="font-size: 12px">拉伸平铺</span>
        </template>
        <a-button class="choose-style" @click="stretching">
          <a-icon type="fullscreen" />
        </a-button>
      </a-tooltip>
    </a-col>
  </a-row>
</div>
</template>

<script>
  import imgDescription from './desc'
  import useCanvas from '../../hooks/useCanvas'
  export default {
    name: 'editor',
    setup () {
      const { canvas, editLayer } = useCanvas()
      return {
        canvas,
        editLayer
      }
    },
    data () {
      return {
        imgDescription,
        borderStyleList: [
          {
            name: '实线',
            value: 'solid'
          },
          {
            name: '虚线',
            value: 'dashed'
          },
          {
            name: '点线',
            value: 'dotted'
          }
        ],
        scaleTemp: {x: 1, y: 1}
      }
    },
    methods: {
      stretching () {
        const scaleX = this.canvas.width / this.editLayer.width
        const scaleY = this.canvas.height / this.editLayer.height
        this.editLayer.set('scaleX', scaleX)
        this.editLayer.set('scaleY', scaleY)
        this.editLayer.set('top', 0)
        this.editLayer.set('left', 0)
        this.editLayer.set('angle', 0)
        this.canvas.renderAll()
      }
    }
  }
</script>

<style scoped lang="scss">
@import "../../style/editor.scss";
</style>
